<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			span {
				/* font-family: "黑体"; */
				font-size: 34px;
				font-weight: 700;
			}

			i {
				font-style: normal;
			}

			.center {
				background-color: #FF0000;
				text-align: center;
				/* text-align：left、right、center，控制水平方向
					CSS中的垂直居中
						line-height：主要控制文字的垂直居中
				 */
				color: #00FFFF;
				height: 100px;
				line-height: 100px;
			}
			
			p {
				text-indent: 10px;
			}
			
			#myback {
				background-image: url("../1.jpg");
				background-repeat: no-repeat;
				/* background-size: 100% 50%;
					如果是百分比，那么写一个值，影响xy，但是是同比拉伸
					如果是像素时，写一个值，只影响x
				 */
				/* background-size: 300px 300px; */
				background-position: left bottom;
				background-color: #0000FF;
				height: 400px;
				/* 
				 background: color image repeat position
				 小练习，给body加一个背景图片，且占满整个浏览器，
				 不允许重复
				 */
				
			}
			
			body {
				background-image: url(../1.jpg);
				background-repeat: no-repeat;
				background-size: 100% 100%;
			}
		</style>
	</head>
	<body>
		<span>哈哈</span>
		<h1>哈哈</h1>
		<i>不需要斜体显示</i>
		<div class="center">
			水平居中显示
		</div>
		<p>jfdkjfkdj不需要斜体显示不需要斜体显示不需要斜体显示不需要斜体显示不需要斜体显示不需要斜体显示不需要斜体显示不需要斜体显示不需要斜体显示不需要斜体显示不需要斜体显示不需要斜体显示不需要斜体显示不需要斜体显示不需要斜体显示不需要斜体显示不需要斜体显示不需要斜体显示不需要斜体显示不需要斜体显示不需要斜体显示不需要斜体显示不需要斜体显示</p>
		<p>jfdkjfkdj</p>
		<p>jfdkjfkdj</p>
		<div id="myback">
			
		</div>
	</body>
</html>
